﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>TweenMax demon</title>
<script src="minified/jquery-1.10.1.min.js"></script>
<script src="minified/TweenMax.min.js"></script>
<script src="minified/SplitText.min.js"></script>
<!--www.tweenmax.com.cn演示实例-->
<!-- Demo styles -->
<style>
body{
  font-family: Asap, Arial, Helvetica, sans-serif;
  color:white;
  background:black;
  margin:5% 15% 0 15%;
  overflow:hidden;
}
#demo{
  position:relative;
}
#quote{
  font-size:40px;
  line-height:50px;
  color:#dedede;
}

button{
  padding:10px;
  cursor:pointer;
}

#nav {
  padding-bottom:20px;
}

</style>
</head>
<body>
<div id="nav">
  <button id="chars">chars</button>
  <button id="words">words</button>
  <button id="lines">lines</button>
  <button id="charsWordsLines">chars words and lines</button>
  <button id="revert">revert</button>
</div>  
  
<div id="demo">
  <div id="quote">SplitText makes it easy to break apart the text in an HTML element so that each character, word, and/or line is wrapped in its own div tag.</div>
  </div>
</div>

<script>
    var $quote = $("#quote"),
    mySplitText = new SplitText($quote, {type:"words"}),
    splitTextTimeline = new TimelineLite();

TweenLite.set($quote, {perspective:400});

//kill any animations and set text back to its pre-split state
function kill(){
  splitTextTimeline.clear().time(0);
  mySplitText.revert();
}

$("#chars").click(function() {
  kill();
  mySplitText.split({type:"chars, words"}) 
  splitTextTimeline.staggerFrom(mySplitText.chars, 0.6, {scale:4, autoAlpha:0,  rotationX:-180,  transformOrigin:"100% 50%", ease:Back.easeOut}, 0.02);
})

$("#words").click(function() {
  kill();
  mySplitText.split({type:"words"}) 
  $(mySplitText.words).each(function(index,el){
    splitTextTimeline.from($(el), 0.6, {opacity:0, force3D:true}, index * 0.01);
    splitTextTimeline.from($(el), 0.6, {scale:index % 2 == 0  ? 0 : 2, ease:Back.easeOut}, index * 0.01); 
  });
})

$("#lines").click(function() {
   kill();
   mySplitText.split({type:"lines"}) 
   splitTextTimeline.staggerFrom(mySplitText.lines, 0.5, {opacity:0, rotationX:-120, force3D:true, transformOrigin:"top center -150"}, 0.1);
 
})

$("#charsWordsLines").click(function() {
  kill();
  mySplitText.split({type:"chars, words, lines"}) 
  splitTextTimeline.staggerFrom(mySplitText.chars, 0.2, {autoAlpha:0, scale:4, force3D:true}, 0.01, 0.5)
    .staggerTo(mySplitText.words, 0.1, {color:"#8FE402", scale:0.9}, 0.1, "words")
    .staggerTo(mySplitText.words, 0.2, {color:"white", scale:1}, 0.1, "words+=0.1")
    .staggerTo(mySplitText.lines, 0.5, {x:100, autoAlpha:0}, 0.2) 
})

//revert the text back to its pre-split state
$("#revert").click(function() {
  mySplitText.revert(); 
})
        </script>
</body>
</html>